<template>
  <div>
      <van-nav-bar  fixed placeholder>
<template #left>
  <img class="logo" src="../../assets/toutiao_logo.4653c8be.png" alt="">
</template>
<template #right>
    <van-icon name="search" size="18" />
  </template>
      </van-nav-bar>
      <!-- 标签栏导航 -->
      <van-tabs v-model="active" animated sticky offset-top="1.2266666667rem">
  <van-tab v-for="obj in userChannelList" :key= "obj.id" :title="obj.name" :name="obj.id" >
<ArticleList :channelId="obj.id"></ArticleList>

  </van-tab>

</van-tabs>
  </div>
</template>

<script>
import { UserChannelListAPI } from '@/api'
import ArticleList from '@/views/Home/ArticleList'
export default {
  components: {
    ArticleList
  },
  data () {
    return {
      active: 2,
      userChannelList: []
    }
  },
  async created () {
    const res = await UserChannelListAPI()
    // console.log(res)
    this.userChannelList = res.data.data.channels
    // console.log(this.userChannelList)
  }
}
</script>

<style>
.logo{
  height: 30px;
  width: 100px;
}
</style>
